<template>
        <div :style="conheight">
            <Form :label-width="120" ref="formInline" :model="formInline">
                <Row  class="query-form"  style="background-color:white;align-content: center">
                    <Col span="10">
                        <FormItem label="企业：">
                            <Select clearable filterable  v-model="formInline.orgId" placeholder="请选择企业"
                                    :remote-method="remoteMethodSelectOrg"
                                    @on-change="query"
                                    :default-label="defaultLabel"
                                    :loading="orgLoading">
                                <Option v-for="(option, index) in orgLists" :value="option.orgId" :key="index">{{option.orgName}}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col  span="6">
                        <FormItem label="日期：">
                            <Select style="width:200px;margin-right:20px" @on-change="queryDetailBySubmitId" clearable filterable v-model="formInline.submitId" placeholder="请选择日期" :loading="submitIdLoading">
                                <Option v-for="(option, index) in submits" :value="option.submitId" :key="index">{{formatDate(new Date(option.updateTime))}}</Option>
                            </Select>
                        </FormItem>
                    </Col>
                    <Col  span="8">
                        <Button class="ivu-btn-query" :loading="buttonLoading"  @click="exportData">导出</Button>
                        <Button v-if="$route.query.companyId != undefined" class="ivu-btn-query"  @click="$router.go(-1)">返回</Button>
                    </Col>
                </Row>
            </Form>
            <Spin style="background-color:#F5F7F9;margin-left:45%;margin-top:200px" size="large" v-if="dateLoading"></Spin>
            <div v-if="!dateLoading && showEchart">
                <div class="headTitle">
                    <div class="headTitleLeft">
                        <p>{{editUserInfo.companyName}} 企业环保画像（当前企业风险等级</p>
                        <p style="color:red">{{editUserInfo.riskLevel}},上次更新时间{{editUserInfo.updateTime}}</p>
                        <p>）</p>
                    </div>
                    <div class="headTitleItem">
                        <p >画像负责人：{{editUserInfo.principal}}</p>
                        <p style="margin-left:20px">电话：{{editUserInfo.phone}}</p>
                    </div>
                </div>
                <div style="background-color:#F5F7F9;height:20px;width:100%;"></div>
                <Row style="background-color:#F5F7F9;">
                    <Col span="8"  style="padding-right:10px">
                        <div class="singleForm">
                            <div class="standardTitleItem">
                                <p style="line-height: 27px;font-size:18px;height:27px;color:red">▎ </p>
                                <p class="formTitle">工序画像</p>
                            </div>
                            <div style="width:100%;height:100%;flex-grow: 1" ref="gongxuContainer"></div>
                        </div>
                    </Col>
                    <Col span="8"  style="padding-right:10px">
                        <div class="singleForm">
                            <div class="standardTitleItem">
                                <p style="line-height: 27px;font-size:18px;height:27px;height:27px;color:red;">▎ </p>
                                <p class="formTitle">{{divTitle}}工序一级风险最多</p>
                            </div>
                            <div style="width:100%;height:100%;flex-grow: 1" ref="riskLevelContainer"></div>
                        </div>
                    </Col>
                    <Col span="8">
                        <div class="singleForm">
                            <div class="standardTitleItem">
                                <p style="line-height: 27px;font-size:18px;height:27px;color:red">▎ </p>
                                <p class="formTitle">管理要素</p>
                                <Select style="float:right;width:200px" v-model="managementElementSelected"  @on-change="changeElementSelected" placeholder="请选择工序">
                                    <Option v-for="item in managementElements" :label="item" :value="item">{{item}}</Option>
                                </Select>
                            </div>
                            <div style="width:100%;height:100%;flex-grow: 1" ref="elementsContainer"></div>
                        </div>
                    </Col>
                </Row>
               <Row>
                   <Col span="24">
                        <span style="float:right;cursor:pointer;" @click="clickChartInvovle" v-if="isExpand == '0'">∧</span>
                        <span  style="float:right;cursor:pointer;" @click="clickChartInvovle" v-else>∨</span>
                   </Col>
               </Row>
                <Row v-show="isExpand == '1'" style="background-color:#F5F7F9;">
                    <Col span="8" style="padding-right:10px">
                       <div class="singleForm">
                           <div class="standardTitleItem">
                               <p style="line-height: 27px;font-size:18px;height:27px;color:red">▎ </p>
                               <p class="formTitle"> 污染因子</p>
                               <Select v-model="pollutionFactorSelected"  style="width:200px;float:right" @on-change="changePollutionSelected"   placeholder="请选择工序">
                                   <Option v-for="item in managementElements2" :label="item" :value="item">{{item}}</Option>
                               </Select>
                           </div>
                           <div style="width:100%;height:100%;flex-grow: 1" ref="pollutionFactorContainer"></div>
                       </div>
                    </Col>
                    <Col span="8"  style="padding-right:10px">
                        <div class="singleForm">
                            <div class="standardTitleItem">
                                <p style="line-height: 27px;font-size:18px;height:27px;color:red">▎ </p>
                                <p class="formTitle">不可控风险与存在处罚记录风险</p>
                            </div>
                            <div style="width:100%;height:100%;flex-grow: 1" ref="riskContainer"></div>
                        </div>
                    </Col>
                    <Col span="8" >
                        <div class="singleForm">
                            <div class="standardTitleItem">
                                <p style="line-height: 27px;font-size:18px;height:27px;color:red">▎ </p>
                                <p class="formTitle">风险等级</p>
                            </div>
                            <div style="width:100%;height:100%;flex-grow: 1" ref="riskGradeContainer"></div>
                        </div>
                    </Col>
                </Row>
                <div v-for="(item,index) in editUserInfo.submitSubitemDatas" class="standardDiv"  @click="selectStandard(index)">
                    <div style="background-color:#F5F7F9;height:10px;width:100%;margin-bottom:5px;"></div>
                    <div class="standardTitle" style="cursor:pointer;"  @click="clickInvovle(index)">
                        <div class="standardTitleItem">
                            <p style="line-height: 27px;font-size:18px;height:27px;color:red">▎ </p>
                            <p>{{item.title}}</p>
                        </div>
                        <div class="standardTitleItem">
                            <RadioGroup :disabled="true"  v-model="item.isinvovle">
                                <Radio :disabled="true"  label="1">
                                    <span>涉及</span>
                                </Radio>
                                <Radio :disabled="true" label="0">
                                    <span>不涉及</span>
                                </Radio>
                            </RadioGroup>
                            <span style="cursor:pointer;" @click="clickInvovle(index)" v-if="item.isExpand == '0'">∧</span>
                            <span  style="cursor:pointer;" @click="clickInvovle(index)"  v-else>∨</span>
                        </div>
                    </div>
                    <Table class="tableClass"  @on-row-click="tableClicked"
                           highlight-row stripe border v-if="item.isExpand == '1'" :columns="sampleColumns" :data="item.details"></Table>
                </div>
            </div>
            <Modal :title="managementElementDetailTitle" :transfer=false v-model="managementElementDetailVisible"
                   :width=1200 footer-hide>
                <Table ref='table' :loading="detailLoading" size="small"  :height=500 no-data-text="没有查询到相关数据!"
                       :row-class-name="rowClassName"  :columns="columns" width="100%" :data="detailInfos">
                </Table>
            </Modal>
        </div>

</template>
<script>
    import echarts from 'echarts'
    import {sessionStorage} from '@/common/cacheUtils.js';
    let cascaderDom = () => import('@/components/cascader-dom.vue');;
    import {Api} from '../../../api/index.js';

    export default {
        name: "submit",
        data() {
            return {
                showTwoLevelInput:false,
                showEchart:false,
                isExpand:false,
                queryLoading: false,
                dateLoading:false,
                detailLoading:false,
                managementElementDetailTitle:"",
                managementElementDetailVisible:false,
                detailInfos:[],
                divTitle:'',
                defaultLabel:sessionStorage('userId').getObject('userId').companyName,
                formInline:{
                    orgId:sessionStorage('userId').getObject('userId').companyId
                },
                twoLevelOrgs:[],
                submitIdLoading:false,
                submits:[],
                orgLists:[
                    {
                        orgId:sessionStorage('userId').getObject('userId').companyId,
                        orgName:sessionStorage('userId').getObject('userId').companyName
                    }
                ],
                orgLoading: false,
                bodyHeight:0,
                currentNode:'',
                managementElements:[],
                managementElements2:[],
                elementFormMaps:[],
                elementFormMaps2:[],
                managementElementSelected:"",
                pollutionFactorSelected:"",
                conheight :{
                    height:'',
                    backgroundColor:'#F5F7F9',
                    display:'flex',
                    flexDirection:'column'
                },
                pagedata: {
                    total: 0, //总条数
                    fromPage: 1,//从n条开始
                    pageSize: 10//每页多少条
                },
                gongxuContainer:null,
                riskLevelContainer:null,
                elementsContainer:null,
                pollutionFactorContainer:null,
                riskContainer:null,
                riskGradeContainer:null,
                buttonLoading: false,
                editSubmit: true,
                editUserInfo:{
                    submitSubitemDatas:[]
                },
                codingList1: [],
                codingList2: [],
                codingList3: [],
                currentStandardIndex: 0,
                userInfo: sessionStorage('userId').getObject('userId'),
                standards:[],
                sampleColumns:[
                    {
                        type: 'index',
                        title: '编号',
                        width: 80,
                        align: 'center',
                    },
                    {
                        title: '管理要素',
                        align: 'center',
                        key: 'managementElements',
                        minWidth: 120,
                        render:(h,params)=>{
                            let value = '';
                            this.codingList1.forEach(i =>{
                                if(i.codingCodeId == params.row.managementElements) value = i.codingName;
                            })
                            return h('div',[
                                h('span',value || '--')
                            ]);
                        }
                    },
                    {
                        title: '控制因子',
                        align: 'center',
                        key: 'pollutionFactor',
                        minWidth: 120,
                        render:(h,params)=>{
                            let value = '';
                            this.codingList2.forEach(i =>{
                                if(i.codingCodeId == params.row.pollutionFactor) value = i.codingName;
                            })
                            return h('div',[
                                h('span',value || '--')
                            ]);
                        }
                    },
                    {
                        title: '风险等级',
                        align: 'center',
                        slot: 'riskLevel',
                        minWidth: 120,
                        render:(h,params)=>{
                            let value = '';
                            this.codingList3.forEach(i =>{
                                if(i.codingCodeId == params.row.riskLevel) value = i.codingName;
                            })
                            return h('div',[
                                h('span',value || '无风险')
                            ]);
                        }
                    },
                ],
                columns:[
                    {
                        type: 'index',
                        title: '编号',
                        width: 80,
                        align: 'center',
                    },
                    {
                        title: '管理要素',
                        align: 'center',
                        key: 'managementElements',
                        minWidth: 120,
                        render:(h,params)=>{
                            let value = '';
                            this.codingList1.forEach(i =>{
                                if(i.codingCodeId == params.row.managementElements) value = i.codingName;
                            })
                            return h('div',[
                                h('span',value || '--')
                            ]);
                        }
                    },
                    {
                        title: '是/否涉及此管理要素',
                        align: 'center',
                        key: 'involveManagementElements',
                        minWidth: 120,
                        render:(h,params)=>{
                            return h('div',[
                                h('span', params.row.involveManagementElements == '1'?'是':params.row.involveManagementElements == '0'?'否':'')
                            ]);
                        }
                    },
                    {
                        title: '控制因子',
                        align: 'center',
                        key: 'pollutionFactor',
                        minWidth: 120,
                        render:(h,params)=>{
                            let value = '';
                            this.codingList2.forEach(i =>{
                                if(i.codingCodeId == params.row.pollutionFactor) value = i.codingName;
                            })
                            return h('div',[
                                h('span',value || '--')
                            ]);
                        }
                    },
                    {
                        title: '是/否涉及此控制因子',
                        align: 'center',
                        slot: 'involvePollutionFactor',
                        minWidth: 120,
                        render:(h,params)=>{
                            return h('div',[
                                h('span', params.row.involvePollutionFactor == '1'?'是':params.row.involvePollutionFactor == '0'?'否':'')
                            ]);
                        }
                    },
                    {
                        title: '法律责任',
                        align: 'center',
                        key: 'legalResponsibility',
                        tooltip: true,
                        minWidth: 120,
                    },
                    {
                        title: '法律法规依据',
                        align: 'center',
                        key: 'lawsRegulations',
                        tooltip: true,
                        minWidth: 120
                    },
                    {
                        title: '风险等级',
                        align: 'center',
                        key: 'riskLevel',
                        minWidth: 120,
                        render:(h,params)=>{
                            let value = '';
                            this.codingList3.forEach(i =>{
                                if(i.codingCodeId == params.row.riskLevel) value = i.codingName;
                            })
                            return h('div',[
                                h('span',value || '--')
                            ]);
                        }
                    },
                    {
                        title: '是/否涉及此项要求',
                        align: 'center',
                        slot: 'involveDetail',
                        minWidth: 120,
                        render:(h,params)=>{
                            return h('div',[
                                h('span', params.row.involveDetail == '1'?'是':params.row.involveDetail == '0'?'否':'')
                            ]);
                        }
                    },
                    {
                        title: '是/否存在问题',
                        align: 'center',
                        slot: 'isExistingProblem',
                        minWidth: 120,
                        render:(h,params)=>{
                            return h('div',[
                                h('span', params.row.isExistingProblem == '1'?'是':params.row.isExistingProblem == '0'?'否':'')
                            ]);
                        }
                    },
                    {
                        title: '控制因子风险定级',
                        align: 'center',
                        key: 'pollutionFactorLevel',
                        minWidth: 120,
                        render:(h,params)=>{
                            if (params.row.isExistingProblem == "1") {
                                let value = '';
                                this.codingList3.forEach(i => {
                                    if (i.codingCodeId == params.row.riskLevel) value = i.codingName;
                                })
                                return h('div', [
                                    h('span', value || '--')
                                ]);
                            }
                            else{
                                return h('div', [
                                    h('span', '无风险')
                                ]);
                            }
                        }
                    },
                    {
                        title: '管理要素风险定级',
                        align: 'center',
                        key: 'managementElementsLevel',
                        minWidth: 120,
                        render:(h,params)=>{
                            if (params.row.isExistingProblem == "1") {
                                let value = '';
                                this.codingList3.forEach(i =>{
                                    if(i.codingCodeId == params.row.riskLevel) value = i.codingName;
                                })
                                return h('div',[
                                    h('span',value || '--')
                                ]);
                            }
                            else{
                                return h('div', [
                                    h('span', '无风险')
                                ]);
                            }
                        }
                    },
                    {
                        title: '风险是否可控',
                        align: 'center',
                        slot: 'isControllableRisk',
                        minWidth: 120,
                        render:(h,params)=>{
                            return h('div',[
                                h('span', params.row.isControllableRisk == '1'?'是':params.row.isControllableRisk == '0'?'否':'')
                            ]);
                        }
                    },
                    {
                        title: '风险控制措施',
                        align: 'center',
                        key: 'riskControlMeasure',
                        minWidth: 200,
                    },
                    {
                        title: '风险量刑预判',
                        align: 'center',
                        key: 'riskJudgement',
                        minWidth: 200,
                    },
                    {
                        title: '问题描述',
                        align: 'center',
                        key: 'problemDesc',
                        minWidth: 200,
                    },
                    {
                        title: '问题原因',
                        align: 'center',
                        key: 'problemReason',
                        minWidth: 200,
                    },
                    {
                        title: '是/否存在行政处罚',
                        align: 'center',
                        key: 'isAdministrativePunishment',
                        minWidth: 120,
                        render:(h,params)=>{
                            return h('div',[
                                h('span', params.row.isAdministrativePunishment == '1'?'是':params.row.isAdministrativePunishment == '0'?'否':'')
                            ]);
                        }
                    },
                    {
                        title: '行政处罚记录（时间、下达处罚政府部门、金额）',
                        align: 'center',
                        key: 'administrativePunishmentRecord',
                        minWidth: 200,
                    }
                ],
                ruleCustom : {
                    opinion: [{
                        validator: (rule, value, callback) => {
                            if (this.showdata.opinion == null || this.showdata.opinion == '' || this.showdata.opinion == undefined) {
                                callback(' ')
                            } else {
                                callback()
                            }
                        },
                        required: true,
                        trigger: 'change, blur'
                    }],
                    route: [
                        {required: true, message: '  ', trigger: 'blur'}
                    ]
                }
            }
        },
        watch:{
            isExpand:function(newData,oldData) {
                if (newData == "1"){
                    setTimeout( () => {
                        let triggerResize = new Event('resize')
                        window.dispatchEvent(triggerResize)
                    },0)
                }
            }
        },
        mounted(){
            this.conheight.height=window.innerHeight-120+'px';
            this.queryCodingSort();
            if(this.$route.query.companyId != undefined){
                this.$nextTick(() => {
                    this.orgLists = [{
                        orgId: this.$route.query.companyId,
                        orgName: this.$route.query.companyName
                    }]
                    this.formInline.orgId = this.$route.query.companyId;
                })
                this.query(this.$route.query.companyId);
            }else {
                this.query(this.userInfo.companyId);
            }
            window.onresize = ()=>{
                if(this.pollutionFactorContainer!=null)
                    this.pollutionFactorContainer.resize();
                if(this.riskContainer!=null)
                    this.riskContainer.resize();
                if(this.riskGradeContainer!=null)
                    this.riskGradeContainer.resize();
            }
        },
        methods:{
            rowClassName(row,index){
              if (row.isExistingProblem == "1") {
                return 'demo-table-error-row'
              }
              return ''
            },
            clickInvovle(index){
                if(this.editUserInfo.submitSubitemDatas[index].isExpand == '1')
                    this.editUserInfo.submitSubitemDatas[index].isExpand = '0';
                else
                    this.editUserInfo.submitSubitemDatas[index].isExpand = '1';
            },
            clickChartInvovle(){
                if(this.isExpand == '1')
                    this.isExpand = '0';
                else {
                    this.isExpand = '1';
                    this.pollutionFactorContainer.resize();
                    this.riskContainer.resize();
                    this.riskGradeContainer.resize();
                }
            },
            changePollutionSelected(value){
                let option = this.getPollutionFactorOption();
                let map = this.elementFormMaps2[this.pollutionFactorSelected];
                option.legend.data = map.legend;
                option.series = map.series;
                this.pollutionFactorContainer.setOption(option);
            },
            changeElementSelected(val){
                let option = this.getElementsOption();
                let map = this.elementFormMaps[this.managementElementSelected];
                option.xAxis[0].data = map.xAxis;
                option.series = map.series;
                this.elementsContainer.setOption(option);
            },
            pageSizeChange(size) {
                this.pagedata.pageSize = size
                this.pagedata.fromPage = 1
                this.query()
            },
            pageChange(pagenum) {
                this.pagedata.fromPage = pagenum
                this.query()
            },
            remoteMethodSelectOrg (query) {
                if (query !== '') {
                    this.orgLoading = true;
                    this.$http.get(Api.queryOrgList+"?companyId="+ this.userInfo.companyId +"&orgName="+query+"&fromPage=1&pageSize=1000").then(res => {
                        this.orgLists = res.data.data;
                        this.orgLoading = false;
                    }).catch(e => {
                        this.orgLoading = false;
                        this.$Message.error('请求失败');
                    })
                } else {
                    this.twoLevelOrgs = [];
                    this.orgLoading = false;
                }
            },
            cancel(){
              this.formInline = {};
            },
            selectStandard(index){
                this.currentStandardIndex = index;
            },
            queryCodingSort(){
                this.$http.get(Api.queryCodeDetailBySortId + '/eco-00001', {params: {}}).then((res) => {
                    this.codingList1 = res.data.data;
                });
                this.$http.get(Api.queryCodeDetailBySortId + '/eco-00002', {params: {}}).then((res) => {
                    this.codingList2 = res.data.data;
                });
                this.$http.get(Api.queryCodeDetailBySortId + '/eco-00003', {params: {}}).then((res) => {
                    this.codingList3 = res.data.data;
                });
            },
            queryByButton(){
                this.query(this.formInline.orgId);
            },
            async query(orgId){
                this.submits = [];
                this.formInline.submitId = "";
                this.divTitle = "";
                this.queryLoading = true;
                await this.$http.get(Api.queryEcoPortraitStandardSubmitsByCompanyId + "/" + orgId).then((res) => {
                    if(res.data.status == 200) {
                        this.submits = res.data.data;
                        this.queryLoading = false;
                        if(this.submits.length > 0){
                            this.formInline.submitId = this.submits[0].submitId;
                            this.queryDetailBySubmitId(this.submits[0].submitId)
                            this.showEchart = true;
                        }else{
                            this.$Message.info('当前公司未进行画像标准填报');
                            this.showEchart = false;
                        }
                    }
                    else{
                        this.$Message.error(res.data.msg);
                        this.queryLoading = false;
                    }
                }).catch(e => {
                    this.queryLoading = false;
                    this.$Message.error('请求失败');
                });
            },
            tableClicked(row,index){
                this.detailInfos = [];
                this.managementElementDetailVisible = true;
                let value = '';
                this.codingList1.forEach(i =>{
                    if(i.codingCodeId == row.managementElements) value = i.codingName;
                })
                this.managementElementDetailTitle = value;
                this.detailLoading = true;
                this.$http.get(Api.queryEcoPortraitFormByTableDetail + "/" + row.submitId+"?pollutionFactor="+row.pollutionFactor
                + "&managementElements=" + row.managementElements).then((res) => {
                    if(res.data.status == 200) {
                        this.detailInfos = res.data.data;
                    }
                    this.detailLoading = false;
                }).catch(e => {
                    this.detailLoading = false;
                    this.$Message.error('请求失败');
                });
            },
            async queryDetailBySubmitId(submitId){
                if(submitId == "" || submitId == undefined)
                    return;
                this.dateLoading = true;
                await this.$http.get(Api.queryEcoPortraitFormByTable + "/" + submitId).then((res) => {
                    if(res.data.status == 200) {
                        this.editUserInfo = res.data.data;
                        if(this.editUserInfo.updateTime != null)
                            this.editUserInfo.updateTime = this.formatDate(new Date(this.editUserInfo.updateTime),"yyyy-MM-dd hh:mm:ss");
                    }
                }).catch(e => {
                    this.$Message.error('请求失败');
                });
                this.dateLoading = false;
                this.loadGongXu(submitId);
                this.loadRiskLevel(submitId);
                this.loadElement(submitId);
                this.loadPollutionFactor(submitId);
                this.loadRisk(submitId);
                this.loadRiskGrade(submitId);
            },
            loadGongXu(submitId){
                let _this=this;
                _this.$http.get(Api.queryEcoPortraitFormByProcess + '/' + submitId).then((res) => {
                    if(res.data.status == 200){
                        _this.gongxuContainer = echarts.init(_this.$refs.gongxuContainer);
                        let option = this.getGongXuOption();
                        option.series[0].data[0].value = res.data.data.value;
                        option.radar.indicator = res.data.data.name;
                        _this.gongxuContainer.setOption(option);
                        _this.gongxuContainer.on("click", riskDetails);
                        function riskDetails(param) {
                            console.log(param);
                            event.stopPropagation() // 阻止冒泡
                           // _this.riskLevelType = param.name
                            //_this.pagedata.fromPage=1
                            //_this.pagedata.pageSize=10
                         //   _this.toViewRisk(param.name)
                        }
                    }
                }).catch(e => {
                    this.$Message.error('请求失败');
                });;
            },
            loadRiskLevel(submitId){
                let _this=this;
                _this.$http.get(Api.queryEcoPortraitFormByRiskLevel + '/' + submitId).then((res) => {
                    if(res.data.status == 200){
                        _this.riskLevelContainer = echarts.init(_this.$refs.riskLevelContainer);
                        let option = this.getRiskLevelOption();
                        option.xAxis[0].data = res.data.data.xAxis;
                        option.series = res.data.data.series;
                        _this.divTitle = res.data.data.managementElement;
                        _this.riskLevelContainer.setOption(option);
                        _this.riskLevelContainer.on("click", riskDetails);
                        function riskDetails(param) {
                            console.log(param);
                            event.stopPropagation() // 阻止冒泡
                            // _this.riskLevelType = param.name
                            //_this.pagedata.fromPage=1
                            //_this.pagedata.pageSize=10
                            //   _this.toViewRisk(param.name)
                        }
                    }
                });
            },
            loadElement(submitId) {
                let _this = this;
                _this.$http.get(Api.queryEcoPortraitFormByelements + '/' + submitId).then((res) => {
                    if (res.data.status == 200) {
                        _this.elementsContainer = echarts.init(_this.$refs.elementsContainer);
                        _this.managementElements = res.data.data.elementLists;
                        _this.elementFormMaps = res.data.data.formMaps;
                        let option = this.getElementsOption();
                        if(_this.managementElements.length>0){
                            _this.managementElementSelected = _this.managementElements[0];
                            let map = _this.elementFormMaps[_this.managementElementSelected];
                            option.xAxis[0].data = map.xAxis;
                            option.series = map.series;
                        }
                        _this.elementsContainer.setOption(option);
                        _this.elementsContainer.on("click", riskDetails);

                        function riskDetails(param) {
                            console.log(param);
                            event.stopPropagation() // 阻止冒泡
                            // _this.riskLevelType = param.name
                            //_this.pagedata.fromPage=1
                            //_this.pagedata.pageSize=10
                            //   _this.toViewRisk(param.name)
                        }
                    }
                });
            },
            loadPollutionFactor(submitId) {
                let _this = this;
                _this.$http.get(Api.queryEcoPortraitFormByPollutionFactor + '/' + submitId).then((res) => {
                    if (res.data.status == 200) {
                        _this.pollutionFactorContainer = echarts.init(_this.$refs.pollutionFactorContainer);
                        _this.managementElements2 = res.data.data.elementLists;
                        _this.elementFormMaps2 = res.data.data.formMaps;
                        let option = this.getPollutionFactorOption();
                        if(_this.managementElements2.length>0){
                            _this.pollutionFactorSelected = _this.managementElements2[0];
                            let map = _this.elementFormMaps2[_this.pollutionFactorSelected];
                            option.legend.data = map.legend;
                            option.series = map.series;
                        }
                        _this.pollutionFactorContainer.setOption(option);
                        _this.pollutionFactorContainer.on("click", riskDetails);
                        function riskDetails(param) {
                            console.log(param);
                            event.stopPropagation() // 阻止冒泡
                            // _this.riskLevelType = param.name
                            //_this.pagedata.fromPage=1
                            //_this.pagedata.pageSize=10
                            //   _this.toViewRisk(param.name)
                        }
                    }
                });
            },
            loadRisk(submitId){
                let _this=this;
                _this.$http.get(Api.queryEcoPortraitFormByRisk + '/' + submitId).then((res) => {
                    if(res.data.status == 200){
                        _this.riskContainer = echarts.init(_this.$refs.riskContainer);
                        let option = this.getRiskOption();
                        option.series[0].data = res.data.data;
                        _this.riskContainer.setOption(option);
                        _this.riskContainer.on("click", riskDetails);
                        function riskDetails(param) {
                            console.log(param);
                            event.stopPropagation() // 阻止冒泡
                            // _this.riskLevelType = param.name
                            //_this.pagedata.fromPage=1
                            //_this.pagedata.pageSize=10
                            //   _this.toViewRisk(param.name)
                        }
                    }
                });
            },
            loadRiskGrade(submitId){
                let _this=this;
                 _this.$http.get(Api.queryEcoPortraitFormByRiskGrade + '/' + submitId).then((res) => {
                    if(res.data.status == 200){
                        _this.riskGradeContainer = echarts.init(_this.$refs.riskGradeContainer);
                        let option = this.getRiskGradeOption();
                        option.series = res.data.data;
                        option.series[0].itemStyle={
                            normal:{color:this.horlinear(
                                    '#00B9EE',
                                    '#4EE7CF'
                                )}
                        }
                        option.series[1].itemStyle={
                            normal:{color:this.horlinear(
                                    '#F9A23E',
                                    '#FBD784'
                                )}
                        }
                        option.series[2].itemStyle={
                            normal:{color:this.horlinear(
                                    '#F45454',
                                    '#FFB082'
                                )}
                        }
                        option.series[3].itemStyle={
                            normal:{color:this.horlinear(
                                    '#1999FF',
                                    '#82CDFF'
                                )}
                        }
                        _this.riskGradeContainer.setOption(option);
                        _this.riskGradeContainer.on("click", riskDetails);
                        function riskDetails(param) {
                            console.log(param);
                            event.stopPropagation() // 阻止冒泡
                            // _this.riskLevelType = param.name
                            //_this.pagedata.fromPage=1
                            //_this.pagedata.pageSize=10
                            //   _this.toViewRisk(param.name)
                        }
                    }
                });
            },
            queryLastSubmitBySubmitId(submitId){
                this.$http.get(Api.queryEcoPortraitStandardLastSubmitBySubmitId + "/" + submitId, {params: {
                        createUserId: this.userInfo.userId
                    }}).then((res) => {
                    if(res.data.status == 200) {
                        this.editUserInfo = res.data.data;
                        this.editUserInfo.updateTime = this.formatDate(new Date(this.editUserInfo.updateTime),"yyyy-MM-dd hh:mm:ss");
                    }
                }).catch(e => {
                    this.$Message.error('请求失败');
                });
            },
            changeResult(result){
                if(result == '1'){
                    this.showdata.opinion = "同意";
                }
                else{
                    this.showdata.opinion = "";
                }
            },
            returnTo(){
                if(this.$route.query.close == true)
                    window.close();
                else
                    this.$router.go(-1);
            },
            exportData(){
                this.buttonLoading = true;
                this.$http.get(Api.exportStandardForm+"/"+this.formInline.submitId, {
                    responseType: 'arraybuffer'      //告诉服务器我们需要的响应格式
                }).then((res) => {
                    const aLink = document.createElement("a");
                    let blob = new Blob([res.data], {
                        type: "application/vnd.ms-excel"
                    });
                    aLink.href = URL.createObjectURL(blob)
                    aLink.download = "环保画像统计数据.xlsx" //标题
                    aLink.click()
                    document.body.appendChild(aLink)
                    this.buttonLoading = false;
                }).catch(e => {
                    this.buttonLoading = false;
                    this.$Message.error('导出失败');
                })
            },
            getGongXuOption(){
                let option = {
                    radar: {
                        indicator: [],
                        shape: 'polygon',
                        splitArea: {
                            areaStyle: {
                                color: 'rgba(216, 239, 255, 0.2)'
                            }
                        },
                        // 每一圈的分割线
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: 'rgba(123, 201, 255, 1)'
                            }
                        },
                        name: {
                            textStyle: {
                                color: 'black',
                                padding: [-10, -12]  // 控制文字padding
                            }
                        },
                    },
                    legend: {
                        left:'center',
                        top:'bottom'
                    },
                    grid:{
                      position:'bottom'
                    },
                    series: [
                        {
                            name: 't',
                            type: 'radar',
                            areaStyle: {
                                normal: {
                                    color: 'rgba(255, 192, 160, 0.5)'
                                }
                            },
                            itemStyle: {
                                color: 'black'
                            },
                            lineStyle: {
                                normal: {
                                    color: 'rgba(255, 119, 6, 1)',
                                    width: 2
                                }
                            },
                            data: [
                                {
                                    value: [],
                                    label: {
                                        normal: {
                                            show: true,
                                            formatter:function(params) {
                                                let label = "";
                                                if(params.value == 4)
                                                    label = "Ⅰ";
                                                else if(params.value == 3)
                                                    label = "Ⅱ";
                                                else if(params.value == 2)
                                                    label = "Ⅲ";
                                                else if(params.value == 1)
                                                    label = "Ⅳ";
                                                else
                                                    label = "";
                                                return label;
                                            }
                                        }
                                    }
                                }
                            ]
                        }
                    ]
                };
                return option;
            },
            getRiskLevelOption(){
                let option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        },
                        textStyle: {
                            fontSize: 12
                        }
                    },
                    legend: {
                        data: ['Ⅰ级', 'Ⅱ级', 'Ⅲ级', 'Ⅳ级'],
                        top:'bottom',
                        left:'center'
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        top:'3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: [],
                            axisLabel: {
                                //x轴文字的配置
                                show: true,
                                interval: 0,//使x轴文字显示全
                                rotate:30,
                                textStyle: {
                                    fontSize: 12,
                                    fontFamily: 'HiraginoSansGB-W3, HiraginoSansGB',
                                    color: 'rgb(51,51,51)',
                                    lineHeight: 18
                                },
                            }
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                    ]
                };
                return option;
            },
            getElementsOption(){
              let option = {
                  tooltip: {
                      trigger: 'axis',
                      axisPointer: {
                          type: 'cross',
                          label: {
                              backgroundColor: '#6a7985'
                          }
                      },
                      textStyle: {
                          fontSize: 12
                      }
                  },
                  legend: {
                      data: ['Ⅰ级', 'Ⅱ级', 'Ⅲ级', 'Ⅳ级'],
                      left:'center',
                      top:'bottom'
                  },
                  grid: {
                      left: '3%',
                      right: '4%',
                      bottom: '3%',
                      top:'3%',
                      containLabel: true
                  },
                  xAxis: [
                      {
                          type: 'category',
                          boundaryGap: false,
                          data: [],
                          axisLabel: {
                              //x轴文字的配置
                              show: true,
                              interval: 0,//使x轴文字显示全
                              textStyle: {
                                  fontSize: 9,
                                  fontFamily: 'HiraginoSansGB-W3, HiraginoSansGB',
                                  color: 'rgb(51,51,51)',
                                  lineHeight: 14
                              },
                              formatter: function(params) {
                                  var newParamsName = "";
                                  var paramsNameNumber = params.length;
                                  var provideNumber = 1; //一行显示几个字
                                  var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
                                  if (paramsNameNumber > provideNumber) {
                                      for (var p = 0; p < rowNumber; p++) {
                                          var tempStr = "";
                                          var start = p * provideNumber;
                                          var end = start + provideNumber;
                                          if (p == rowNumber - 1) {
                                              tempStr = params.substring(start, paramsNameNumber);
                                          } else {
                                              tempStr = params.substring(start, end) + "\n";
                                          }
                                          newParamsName += tempStr;
                                      }
                                  } else {
                                      newParamsName = params;
                                  }
                                  return newParamsName;
                              }
                          }
                      }
                  ],
                  yAxis: [
                      {
                          type: 'value'
                      }
                  ],
                  series: [
                  ]
              };
              return option;
            },
            getPollutionFactorOption(){
              let option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        },
                        textStyle: {
                            fontSize: 12
                        }
                    },
                    legend: {
                        data: [],
                        left:'center',
                        top:'bottom',
                        type:'scroll'
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '20%',
                        top:'3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: false,
                            data: ['Ⅰ级', 'Ⅱ级', 'Ⅲ级', 'Ⅳ级'],
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                    ]
                };
                return option;
            },
            getRiskOption(){
                let option = {
                    tooltip: {
                        trigger: 'item',
                        textStyle: {
                            fontSize: 12
                        }
                    },
                    legend: {
                        orient:'vertical',
                        top:'center',
                        left:'right'
                    },
                    series: [
                        {
                            name: '',
                            type: 'pie',
                            radius: ['50%', '70%'],
                            center:['40%','50%'],
                            avoidLabelOverlap: false,
                            itemStyle: {
                                normal: {
                                    borderRadius: 10,
                                    borderColor: '#fff',
                                    borderWidth: 2
                                }
                            },
                            label: {
                                show: false,
                                position: 'center'
                            },
                            emphasis: {
                                label: {
                                    show: true,
                                    fontSize: '18',
                                    fontWeight: 'bold'
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            color: [this.linear(
                                '#355AF1',
                                '#919DEF'
                            ), this.linear(
                                '#4CD1A8',
                                '#81E595'
                            )],
                            data: []
                        }
                    ]
                };
                return option;
            },
            getRiskGradeOption(){
                let option = {
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        },
                        textStyle: {
                            fontSize: 12
                        }
                    },
                    legend: {
                        top:'bottom',
                        left:'center'
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '8%',
                        top:'3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value'
                    },
                    yAxis: {
                        type: 'category',
                        data: ['1']
                    },
                    series: [
                    ]
                };
                return option;
            },
            radial(startColor, endColor) {
                // 径向渐变，前三个参数分别是圆心 x, y 和半径，取值同线性渐变
                // 数组, 用于配置颜色的渐变过程. 每一项为一个对象, 包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置
                return {
                    type: 'radial',
                    x: 0.5,
                    y: 0.5,
                    r: 0.5,
                    colorStops: [{
                        offset: 0, color: startColor // 0% 处的颜色
                    }, {
                        offset: 1, color: endColor // 100% 处的颜色
                    }],
                    globalCoord: false // 缺省为 false
                }
            },
            linear(startColor, endColor) {
                // 4个方位参数依次为右、下、左、上，（0 0 0 1）代表从正上方开始
                // 数组, 用于配置颜色的渐变过程. 每一项为一个对象, 包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置
                return {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: startColor // 0% 处的颜色
                    }, {
                        offset: 1, color: endColor // 100% 处的颜色
                    }],
                    globalCoord: false // 缺省为 false
                }
            },
            horlinear(startColor, endColor) {
                // 4个方位参数依次为右、下、左、上，（0 0 0 1）代表从正上方开始
                // 数组, 用于配置颜色的渐变过程. 每一项为一个对象, 包含offset和color两个参数. offset的范围是0 ~ 1, 用于表示位置
                return {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 0,
                    colorStops: [{
                        offset: 0, color: startColor // 0% 处的颜色
                    }, {
                        offset: 1, color: endColor // 100% 处的颜色
                    }],
                    globalCoord: false // 缺省为 false
                }
            },
            formatDate(date, fmt) {
                if (typeof date == 'string') {
                    return date;
                }
                if (!fmt) fmt = "yyyy-MM-dd hh:mm:ss";
                if (!date || date == null) return null;
                let o = {
                    'M+': date.getMonth() + 1, // 月份
                    'd+': date.getDate(), // 日
                    'h+': date.getHours(), // 小时
                    'm+': date.getMinutes(), // 分
                    's+': date.getSeconds(), // 秒
                    'q+': Math.floor((date.getMonth() + 3) / 3), // 季度
                    'S': date.getMilliseconds() // 毫秒
                }
                if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
                for (let k in o) {
                    if (new RegExp('(' + k + ')').test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length === 1) ? (o[k]) : (('00' + o[k]).substr(('' + o[k]).length)))
                }
                return fmt
            },
        }
    }

</script>

<style lang='css' scoped>
    @import '../../../index.css';

    .ivu-card-bordered{
        border:none;
    }

    .headTitle{
        width:100%;
        display:flex;
        flex-direction: row;
        justify-content: left;
        align-items: center;
        background-color:white;
        padding-top:10px;
        padding-bottom:10px;
    }

    .headTitleLeft{
        margin-bottom:10px;
        display:flex;
        align-items: center;
        flex-direction: row;
        justify-content: space-around;
    }

    .headTitleItem{
        display: flex;
        align-items: center;
        flex:auto;
        justify-content: center;
    }

    .standardDiv{
        display:flex;
        flex-direction: column;
        width:100%;
        background-color: white;
    }

    .standardTitle{
        display:flex;
        flex-direction: row;
        width:100%;
        justify-content:space-between;
        align-items: center;
    }

    .standardTitleItem{
        display:flex;
        flex-direction: row;
        justify-content: left;
        margin-right:20px;
    }

    .tableClass >>> .ivu-table-cell{
        padding-left: 0px;
        padding-right: 0px;
        overflow: hidden;
        overflow-x: hidden;
        overflow-y: hidden;
        text-overflow: ellipsis;
        white-space: normal;
        word-break: break-all;
        box-sizing: border-box;
    }

    .singleForm{
        width:100%;
        height:250px;
        background-color:white;
        padding: 10px;
        display:flex;
        flex-direction: column;
    }

    .formTitle{
        font-size: 18px;
        font-family: HiraginoSansGB-W3, HiraginoSansGB;
        font-weight: normal;
        color: #333333;
        line-height: 27px;
        flex-grow:1;
    }

    /deep/ .ivu-table .demo-table-error-row td{
      background-color: red!important;
    }
</style>